<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>login</title>
    <link rel="stylesheet" href="../lib/weui.css"/>
    <link rel="stylesheet" href="../lib/weui2.css"/>
    <link rel="stylesheet" href="../lib/weui3.css"/>
    <link rel="stylesheet" href="../lib/bootstrap.min.css">
    <link rel="stylesheet" href="../css/credit%20use%20details.css">
    <link rel="stylesheet" href="../css/icon.css">
    <script src="../js/jquery-2.1.1.js"></script>
    <script src="../js/zepto.min.js"></script>
</head>
<body class="class6" style="overflow:hidden">
<div class="header"><span class="span1">登录</span></div>
<div class="weui_cells weui_cells_form" style="margin-top:10px;">
    <div class="weui_cell">
        <div id="account" class="weui_cell_hd"><label class="weui_label">账号</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input id='input_account' class="weui_input" placeholder="请输入账号"/>
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">密码</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" placeholder="请输入密码"/>
        </div>
    </div>
</div>
<div class="div_login">
    <button id="login" class="btn btn-success btn_login">登录</button>
    <br/>
    <a class="forget_keyword" href="">忘记密码</a>
</div>

<div id="historyRecord">
</div>
</body>
<script type="text/javascript">
    var records = ["历史记录1", "历史纪录2", "历史纪录3"];
    //var records=null;
    var listEl = document.getElementById("historyRecord");
    var content = "";
    if (records != null) {
        content += '<div class="weui_cells_title historical_account margin">历史账号</div>';
        content += '<div class=weui_cells>';
        for (var i = 0; i < records.length; i++) {
            content +='<div class="weui_cell">';
            content += '<div class="weui_cell_bd weui_cell_primary history_record">';
            content += '<p>' + records[i] + '</p>';
            content += '</div>';
            content += '<div class="weui_cell_ft">';
            content += '<i class="weui_icon_clear"></i>';
            content += ' </div>';
            content += '</div>';
        }
        content += '</div>';
    }
    else {
        content += '<div style="display: flex;align-items:center;">';
        content += '<span class="weui_cells_title historical_account margin">历史账号</span>';
        content += '<span class="forget_keyword" style="float:right;padding-right:15px;">展开</span>';
        content += '</div>';
    }
    listEl.innerHTML += content;
    window.onload = function () {
        var classname = document.getElementsByClassName("history_record");
        var funny = function (j) {
            classname[j].onclick = function () {
                document.getElementById("input_account").value = records[j];
            }
        }
        for (var j = 0; j < classname.length; j++) {
            funny(j);
        }
    }
</script>
</html>